<!DOCTYPE html>  
<html>  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>进制转换</title> 
    <style>  
        /* 定义输入框的样式 */  
        .beautified-input {  
            width: 200px; /* 设置输入框的宽度 */  
            height: 30px; /* 设置输入框的高度 */  
            padding: 5px; /* 设置内边距 */  
            border: 1px solid #ccc; /* 设置边框颜色和宽度 */  
            border-radius: 5px; /* 设置边框圆角 */  
            font-size: 16px; /* 设置字体大小 */  
            outline: none; /* 移除输入框的轮廓 */  
        }  
          
        /* 定义转换按钮的样式 */  
        .conversion-button {  
            display: inline-block;  
            width: 50px;  
            height: 30px;  
            background-color: #4CAF50; /* 设置按钮的背景颜色 */  
            color: white; /* 设置按钮的文字颜色 */  
            text-align: center;  
            line-height: 30px; /* 设置按钮的垂直居中文本 */  
            border: none; /* 移除边框 */  
            cursor: pointer; /* 设置鼠标悬停时显示为手型 */  
        }  
          
        /* 定义选择进制的下拉框样式 */  
        .select-base {  
            width: 150px;  
            height: 30px;  
            border: 1px solid #ccc;  
            border-radius: 5px;  
            font-size: 16px;  
        }  
    </style>   
</head>  
<body>  
    <input type="number" class="beautified-input"  id="inputNumber" placeholder="输入数字">  
    <select id="inputBase"  class="select-base">  
        <option value="2">二进制</option>  
        <option value="8">八进制</option>  
        <option value="10">十进制</option>  
        <option value="16">十六进制</option>  
    </select>  
    <br/>  
    <select id="outputBase" class="select-base">  
        <option value="2">二进制</option>  
        <option value="8">八进制</option>  
        <option value="10">十进制</option>  
        <option value="16">十六进制</option>  
    </select>  
    <br/>  
    <button onclick="convert()" class="conversion-button">转换</button>  
    <br/>  
    <div id="result"></div>  
  
    <script>  
        function convert() {  
            let inputNumber = document.getElementById('inputNumber').value;  
            let inputBase = parseInt(document.getElementById('inputBase').value, 10);  
            let outputBase = parseInt(document.getElementById('outputBase').value, 10);  
            let result;  
  
            try {  
                if (inputBase === outputBase) { // 如果输入进制等于输出进制，直接显示数字。  
                    result = inputNumber;  
                } else { // 否则，进行转换。  
                    result = parseInt(inputNumber, inputBase).toString(outputBase); // 使用parseInt进行转换，并使用toString将结果转换为指定进制。例如：parseInt('10', 2).toString(16)返回'A'。  
                }  
                document.getElementById('result').innerHTML = "转换结果为: " + result; // 将结果显示在页面上。例如：显示 "转换结果为: A"。  
            } catch (e) { // 如果输入无法转换为数字，则显示错误消息。例如："abc"无法转换为数字。  
                document.getElementById('result').innerHTML = "输入错误: " + e.message; // 将错误消息显示在页面上。例如：显示 "输入错误: "abc"无法转换为数字"。  
            }  
        }  
    </script>  
</body>  
</html>